<template>
  <div class="product-detail">
    <div class="product-content">
      <!-- 商品图片 -->
      <div class="product-gallery">
        <el-carousel :interval="4000" type="card" height="400px">
          <el-carousel-item v-for="(image, index) in productImages" :key="index">
            <el-image :src="image" fit="cover" />
          </el-carousel-item>
        </el-carousel>
      </div>

      <!-- 商品信息 -->
      <div class="product-info">
        <h1 class="product-name">{{ product.name }}</h1>
        <div class="product-price">
          <span class="current-price">¥{{ product.price }}</span>
          <span v-if="product.discountRate" class="original-price">
            ¥{{ (product.price / product.discountRate).toFixed(2) }}
          </span>
          <span v-if="product.discountRate" class="discount-tag">
            {{ Math.round((1 - product.discountRate) * 100) }}% OFF
          </span>
        </div>

        <div class="product-meta">
          <div class="meta-item">
            <span class="label">所需信用分：</span>
            <span class="value">{{ product.minCreditScore }}</span>
          </div>
          <div class="meta-item">
            <span class="label">库存：</span>
            <span class="value">{{ product.stockQuantity }}</span>
          </div>
          <div class="meta-item">
            <span class="label">销量：</span>
            <span class="value">{{ product.salesCount }}</span>
          </div>
          <div class="meta-item">
            <span class="label">浏览量：</span>
            <span class="value">{{ product.viewCount }}</span>
          </div>
        </div>

        <div class="product-description">
          <h3>商品描述</h3>
          <p>{{ product.description }}</p>
        </div>

        <div class="product-features">
          <h3>商品特点</h3>
          <ul>
            <li v-if="product.isInstallmentAvailable">
              <el-icon><CreditCard /></el-icon>
              支持分期付款（{{ product.installmentMonths }}期）
            </li>
            <li v-if="product.discountRate">
              <el-icon><Discount /></el-icon>
              信用分折扣优惠
            </li>
          </ul>
        </div>

        <div class="product-actions">
          <el-input-number
            v-model="quantity"
            :min="1"
            :max="product.stockQuantity"
            label="数量"
          />
          <el-button type="primary" @click="handleAddToCart">加入购物车</el-button>
          <el-button type="success" @click="handleBuyNow">立即购买</el-button>
        </div>
      </div>
    </div>

    <!-- 推荐商品 -->
    <div class="recommended-products">
      <h2>猜你喜欢</h2>
      <el-row :gutter="20">
        <el-col v-for="item in recommendedProducts" :key="item.id" :span="6">
          <el-card class="recommended-item" :body-style="{ padding: '0px' }">
            <div class="item-image" @click="viewProduct(item.id)">
              <el-image :src="item.imageUrl" fit="cover" />
            </div>
            <div class="item-info">
              <h4 class="item-name">{{ item.name }}</h4>
              <div class="item-price">
                <span class="current-price">¥{{ item.price }}</span>
                <span v-if="item.discountRate" class="original-price">
                  ¥{{ (item.price / item.discountRate).toFixed(2) }}
                </span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { CreditCard, Discount } from '@element-plus/icons-vue'
import { getProduct, getRecommendedProducts } from '@/api/product'

export default {
  name: 'ProductDetail',
  components: {
    CreditCard,
    Discount
  },
  props: {
    productId: {
      type: [Number, String],
      required: true
    }
  },
  emits: ['close'],
  setup(props, { emit }) {
    const router = useRouter()
    const product = ref({})
    const productImages = ref([])
    const recommendedProducts = ref([])
    const quantity = ref(1)

    // 加载商品详情
    const loadProduct = async () => {
      try {
        const data = await getProduct(props.productId)
        product.value = data
        // 假设商品图片存储在数组中
        productImages.value = [data.imageUrl]
      } catch (error) {
        ElMessage.error('加载商品详情失败')
      }
    }

    // 加载推荐商品
    const loadRecommendedProducts = async () => {
      try {
        recommendedProducts.value = await getRecommendedProducts(props.productId)
      } catch (error) {
        ElMessage.error('加载推荐商品失败')
      }
    }

    // 查看商品
    const viewProduct = (id) => {
      router.push(`/credit/products/${id}`)
    }

    // 加入购物车
    const handleAddToCart = () => {
      // TODO: 实现加入购物车功能
      ElMessage.success('已加入购物车')
    }

    // 立即购买
    const handleBuyNow = () => {
      router.push({
        path: '/credit/checkout',
        query: {
          productId: props.productId,
          quantity: quantity.value
        }
      })
    }

    onMounted(() => {
      loadProduct()
      loadRecommendedProducts()
    })

    return {
      product,
      productImages,
      recommendedProducts,
      quantity,
      viewProduct,
      handleAddToCart,
      handleBuyNow
    }
  }
}
</script>

<style lang="scss" scoped>
.product-detail {
  .product-content {
    display: flex;
    gap: 40px;
    margin-bottom: 40px;

    .product-gallery {
      flex: 1;
      max-width: 600px;

      .el-carousel {
        .el-image {
          width: 100%;
          height: 100%;
        }
      }
    }

    .product-info {
      flex: 1;

      .product-name {
        font-size: 24px;
        margin: 0 0 20px;
      }

      .product-price {
        margin-bottom: 20px;

        .current-price {
          font-size: 28px;
          color: #f56c6c;
          font-weight: bold;
        }

        .original-price {
          margin-left: 10px;
          font-size: 16px;
          color: #999;
          text-decoration: line-through;
        }

        .discount-tag {
          margin-left: 10px;
          padding: 2px 8px;
          background-color: #f56c6c;
          color: white;
          border-radius: 4px;
          font-size: 14px;
        }
      }

      .product-meta {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        margin-bottom: 20px;
        padding: 15px;
        background-color: #f5f7fa;
        border-radius: 4px;

        .meta-item {
          .label {
            color: #666;
          }

          .value {
            color: #333;
            font-weight: bold;
          }
        }
      }

      .product-description {
        margin-bottom: 20px;

        h3 {
          font-size: 18px;
          margin-bottom: 10px;
        }

        p {
          color: #666;
          line-height: 1.6;
        }
      }

      .product-features {
        margin-bottom: 20px;

        h3 {
          font-size: 18px;
          margin-bottom: 10px;
        }

        ul {
          list-style: none;
          padding: 0;

          li {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
            color: #666;

            .el-icon {
              color: #67c23a;
            }
          }
        }
      }

      .product-actions {
        display: flex;
        gap: 15px;
        margin-top: 30px;
      }
    }
  }

  .recommended-products {
    h2 {
      font-size: 20px;
      margin-bottom: 20px;
    }

    .recommended-item {
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
      }

      .item-image {
        height: 200px;

        .el-image {
          width: 100%;
          height: 100%;
        }
      }

      .item-info {
        padding: 10px;

        .item-name {
          margin: 0 0 8px;
          font-size: 14px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .item-price {
          .current-price {
            color: #f56c6c;
            font-weight: bold;
          }

          .original-price {
            margin-left: 5px;
            font-size: 12px;
            color: #999;
            text-decoration: line-through;
          }
        }
      }
    }
  }
}
</style> 